<!-- 主要页面左侧导航栏的导航菜单 -->
<template>
    <div class="left-nav-menu">
        <ul class="nav-menu">
            <slot></slot>
        </ul>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
    name:"LeftNavMenu"
})
export default class extends Vue{}
</script>

<style>
.left-nav-menu{
    width: 100%;
}
.nav-menu{
    width: 100%;
    font-weight: 700;
}
.nav-menu-item{
    z-index: 4;
    box-sizing: border-box;
    display: flex;
    height: 46px;
    cursor: pointer;
    color: #aaa;
    align-items: center;
    padding-left: 15%;
    border-left:5.6px solid white;
    position: relative;
    background-color: white;
}
.nav-menu-item:hover{
    background-color: #eee;
    border-left:5.6px solid #eee
}
</style>